/**
 * @description 组件样式
 * @author: 陈陈
 * @date: 2025/05/09
 * @phone: 18560000860
 * @email: 18560000860@qq.com
 * @company: 济南晨霜信息技术有限公司 /
 * @business: 承接前后端项目的开发
 */
.pure-switch {
	--var-pure-switch-circle-gap: var(--pure-switch-circle-gap, 2px);
	--var-pure-switch-circle-size: calc(var(--pure-switch-height, 2em) - var(--var-pure-switch-circle-gap) * 2);
	display: flex;
	align-items: center;
	gap: var(--pure-switch-gap, 5px);

	&__main {
		width: var(--pure-switch-width, 3.5em);
		height: var(--pure-switch-height, 2em);
		border-radius: var(--pure-switch-border-radius, var(--pure-radius-round));
		overflow: hidden;
		position: relative;
		display: inline-flex;
		flex-shrink: 0;

		&::before {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: inherit;
			background: var(--pure-switch-background, var(--pure-background-deep));
			z-index: 0;
			opacity: var(--pure-switch-background-opacity);
			transition: var(--pure-switch-transition, all 0.3s);
		}

		&::after {
			content: "";
			position: absolute;
			width: 100%;
			height: 100%;
			border-radius: inherit;
			background: transparent;
			z-index: 1;
			opacity: var(--pure-switch-background-opacity);
			transition: var(--pure-switch-transition, all 0.3s);
			border: var(
				--pure-switch-border,
				var(--pure-switch-border-width, 0) var(--pure-switch-border-style, solid)
					var(--pure-switch-border-color, var(--pure-switch-theme, var(--pure-border-color-default)))
			);
		}
	}

	&__circle {
		position: absolute;
		width: var(--var-pure-switch-circle-size);
		height: var(--var-pure-switch-circle-size);
		border-radius: var(--pure-switch-circle-border-radius, var(--pure-radius-circle));
		background: var(--pure-switch-background, var(--pure-background-default));
		z-index: 2;
		opacity: var(--pure-switch-circle-opacity);
		left: var(--var-pure-switch-circle-gap);
		top: var(--var-pure-switch-circle-gap);
		transition: var(--pure-switch-transition, all 0.3s);
	}

	&__content {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 1;
		padding: var(--pure-switch-content-padding, 0 var(--var-pure-switch-circle-gap));
	}

	&__texts {
		height: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		font-size: var(--pure-switch-texts-font-size, var(--pure-font-size-small));
		font-weight: var(--pure-switch-texts-font-weight);
		color: var(--pure-switch-texts-color);
		justify-content: space-between;
		padding: var(--pure-switch-texts-padding, 0 6px);
		line-height: 1;
	}

	&__text {
		transition: opacity 300ms;
		opacity: 0;

		&--on {
			color: var(--pure-switch-on-text-color, var(--pure-text-color-invert));
		}

		&--off {
			color: var(--pure-switch-off-text-color, var(--pure-text-color-regular));
		}

		&--show {
			opacity: 1;
		}

		&--loading {
			animation: animationPureSpin var(--pure-loading-animation-duration, 1000ms)
				var(--pure-loading-animation-timing-function, linear) 0s infinite;
		}
	}

	&__icons {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 2;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		line-height: 1;
	}

	&__icon {
		position: absolute;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		z-index: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		opacity: 0;
		font-size: var(--pure-switch-icon-font-size);

		&--loading {
			animation: animationPureSpin var(--pure-loading-animation-duration, 1000ms)
				var(--pure-loading-animation-timing-function, linear) 0s infinite;
		}

		&--show {
			opacity: 1;
		}
	}

	&--text-mode {
		&--outer {
			.pure-switch__text {
				font-size: var(--pure-switch-texts-font-size);
				font-weight: var(--pure-switch-texts-font-weight);
				color: var(--pure-switch-texts-color);

				&--on {
					color: var(--pure-switch-on-text-color, var(--pure-switch-theme, var(--pure-theme-primary)));
				}

				&--off {
					color: var(--pure-switch-off-text-color, var(--pure-text-color-regular));
				}
			}
		}

		&--circle {
			.pure-switch__texts {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 2;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
			}

			.pure-switch__text {
				position: absolute;
				width: 100%;
				height: 100%;
				left: 0;
				top: 0;
				z-index: 0;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;

				&--on {
					color: var(--pure-switch-on-text-color, var(--pure-switch-theme, var(--pure-theme-primary)));
				}

				&--off {
					color: var(--pure-switch-off-text-color, var(--pure-text-color-regular));
				}
			}
		}

		&--icon {
			.pure-switch__icon {
				&--on {
					color: var(--pure-switch-on-text-color, var(--pure-switch-theme, var(--pure-theme-primary)));
				}

				&--off {
					color: var(--pure-switch-off-text-color, var(--pure-text-color-regular));
				}

				&--loading {
					color: var(--pure-switch-loading-color, var(--pure-switch-theme, var(--pure-theme-primary)));
				}
			}
		}
	}

	&--ghost {
		.pure-switch__main {
			&::before {
				background: var(--pure-switch-background, var(--pure-switch-theme, var(--pure-background-deep)));
				opacity: var(--pure-switch-background-opacity, var(--pure-opacity-ghost));
			}
		}
	}

	&--border {
		.pure-switch__main {
			&::after {
				border-width: var(--pure-switch-border-width, 1px);
			}
		}
	}

	&--checked {
		&.pure-switch--theme {
			.pure-switch__main {
				&::before {
					background: var(--pure-switch-background, var(--pure-switch-theme, var(--pure-background-deep)));
				}
			}
		}

		&.pure-switch--ghost {
			.pure-switch__main {
				&::before {
					opacity: var(--pure-switch-background-opacity, 1);
				}
			}
		}

		.pure-switch__circle {
			transform: translateX(
				calc(
					var(--pure-switch-width, 3.5em) - var(--var-pure-switch-circle-size) -
						var(--var-pure-switch-circle-gap) * 2
				)
			);
		}
	}

	&--disabled {
		pointer-events: none;
		opacity: var(--pure-switch-disabled-opacity, var(--pure-opacity-disabled));
	}

	&--readonly {
		pointer-events: none;
	}
}
